<template>
  <div class="container">
    <div class="main">
      <p class="title">
        {{ getTimeState() }}， <span v-if="userName">{{ userName }}</span>
      </p>
      <template v-if="list.length">
        <p class="text">请选择您要处理的事项</p>
        <div class="list">
          <div class="item" v-for="item in list" :key="item.name" @click="jumpPage(item.path)">
            <div class="item-name">{{ item.name }}</div>
            <div class="item-img bg-image">
              <img class="img" :src="item.icon2x" />
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import { useUserInfo } from '@/stores/user'
import agency2x from '../../assets/image/agency@2x.png'
import knowledgeSetting2x from '../../assets/image/knowledge-setting@2x.png'
import baseSetting2x from '../../assets/image/baseSetting@2x.png'
import clientMarketSettings from '../../assets/image/clientMarketSettings.png'
import organizationalStructure2x from '../../assets/image/organizational-structure@2x.png'
import guozhijuicon from '../../assets/image/guozhiju.png'
import processManage from '../../assets/image/processManage.png'
import daibanguanli from '../../assets/image/daibanguanli.png'
import lcgl from '@/assets/image/lcgl.png'
import cpyfpz from '@/assets/image/cpyfpz.png'
import supplier from '../../assets/image/supplier.png'

const $store = useUserInfo()
const $router = useRouter()
const { userInfo } = storeToRefs($store)

const hasMeta = computed(() => {
  return (userInfo.value as any).permissionJson?.hasMeta || []
})

const list = computed(() => {
  return getSource().filter((x) => hasMeta.value.includes(x.perCode))
})
const userName = computed(() => {
  return (userInfo.value as any)?.userName
})

function getSource() {
  return [
    {
      name: '组织架构管理',
      icon2x: organizationalStructure2x,
      perCode: 'BS10001',
      path: '/systemset/organizationManage'
    },
    {
      name: '流程管理',
      icon2x: processManage,
      perCode: 'BS10005',
      path: '/systemset/processManagement'
    },
    {
      name: '产品研发配置',
      icon2x: cpyfpz,
      perCode: 'BS10010',
      path: '/workflow/template-configuration'
    },
    {
      name: '知识产权配置',
      icon2x: knowledgeSetting2x,
      perCode: 'BS10002',
      path: '/systemset/intellectualPropertyRights'
    },
    {
      name: '服务机构管理',
      icon2x: agency2x,
      perCode: 'BS10003',
      path: '/systemset/agencyManagement'
    },
    {
      name: '国知局专利系统账号',
      icon2x: guozhijuicon,
      perCode: 'BS10007',
      path: '/systemset/patentManagement'
    },
    {
      name: '客户营销设置',
      icon2x: clientMarketSettings,
      perCode: 'BS10006',
      path: '/systemset/clientMarketSettings'
    },
    {
      name: '供应商管理设置',
      icon2x: supplier,
      perCode: 'BS10011',
      path: '/systemset/parameterSetting'
    },
    {
      name: '待办管理',
      icon2x: daibanguanli,
      perCode: 'BS10008',
      path: '/systemset/resignationAgent'
    },
    {
      name: '流程表单管理',
      icon2x: lcgl,
      perCode: 'BS10009',
      path: '/workflow/fields-manage'
    },
    {
      name: '基本设置',
      icon2x: baseSetting2x,
      perCode: 'BS10004',
      path: '/systemset/basicSettings'
    }
  ]
}

const jumpPage = (path: string = '') => {
  $router.push(path)
}

const getTimeState = () => {
  let hoursTip = ''
  const date = new Date().getHours()
  if (date >= 0 && date < 12) {
    hoursTip = '上午好'
  } else if (date >= 12 && date < 18) {
    hoursTip = '下午好'
  } else {
    hoursTip = '晚上好'
  }
  return hoursTip
}
</script>

<style lang="scss" scoped>
.container {
  height: calc(100vh - 60px);
  background-color: #eff2f6;
  .main {
    padding-top: 100px;
    padding-left: 156px;
  }
  .title {
    font-size: 28px;
    color: #292a2d;
    line-height: 36px;
    font-weight: 600;
  }
  .text {
    margin-top: 8px;
    font-size: 20px;
    color: #63656a;
    line-height: 28px;
    font-weight: 400;
    margin-bottom: 34px;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    .item {
      box-sizing: border-box;
      width: 248px;
      height: 279px;
      background-color: #fff;
      margin-right: 24px;
      margin-bottom: 24px;
      cursor: pointer;
      &:active {
        opacity: 0.7;
      }
      .item-name {
        padding: 15px 24px;
        font-size: 18px;
        color: #292a2d;
        line-height: 26px;
        font-weight: 600;
      }
      .item-img {
        margin-top: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 30px 26px;
        // background: #f3f1f1;
        overflow: hidden;
        .img {
          width: 188px;
          height: 188px;
          background-size: contain;
          object-fit: contain;
          transition: all 0.5s ease-in;
          &:hover {
            transform: scale(1.1);
          }
        }
      }
    }
  }
}
</style>
